
<!-- 个人用户详细信息 -->
<template>
    <el-breadcrumb>
        <el-breadcrumb-item :to="{ path: '/User' }">我的</el-breadcrumb-item>
        <el-breadcrumb-item>个人信息</el-breadcrumb-item>
    </el-breadcrumb>

    <el-divider></el-divider>

    <el-empty v-if="!userSession" description="description" />
    <div v-else class="box">
        <h1>个人信息页面</h1>

        <!-- 头像 -->
        <div class="avatar">
            <el-avatar size="large" src="/avatar/2.jpg" />
        </div>

        <!-- 信息表单 -->
        <div class="info">
            <el-form :model="user" label-width="120px" label-position="top">
                <el-form-item label="昵称">
                    <el-input v-model="user.nikename" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="密码" prop="pass">
                    <el-input v-model="user.password" type="password" autocomplete="off" />
                </el-form-item>
                <el-form-item label="邮箱">
                    <el-input v-model="user.email" placeholder="请输入邮箱" />
                </el-form-item>
                <el-form-item label="性别" prop="sex">
                    <el-radio-group v-model="user.sex">
                        <el-radio label="男" />
                        <el-radio label="女" />
                        <el-radio label="保密" />
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="收货人姓名">
                    <el-input v-model="user.name" placeholder="请输入用户名" />
                </el-form-item>
                <el-form-item label="收货联系电话">
                    <el-input v-model="user.phone" placeholder="请输入常用的电话" />
                </el-form-item>
                <el-form-item label="常用收货地址">
                    <el-input v-model="user.address" placeholder="请输入常用收货地址" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="putUserInfo">保存</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { useGlobalStore } from '../../store/global';
 
export default {
    setup(){
        const globalstore = useGlobalStore()
        return {
            globalstore
        }
    },
    data() {
        return {
            rootImage: "/avatar/",
            user: {},
            userSession: "1"
        }
    },
    methods: {
        showTips(tips, type) {
            ElMessage({
                showClose: true,
                message: tips,
                type: type,
            });
        },
        getUserInfo() {
			const userData = JSON.parse(sessionStorage.getItem('username'));
			console.log(userData) 
			this.user = userData;
			
            /* axios
			//.get("/user")
			.get('../../public/user.json')
                .then((res) => {
				console.log(res.data) 
                    this.user = res.data[0];
                }); */
        },
        putUserInfo() {
          // 获取要更新的值
          let userData = JSON.parse(sessionStorage.getItem('username'));

          // 检查是否存在需要更新的值
          if (userData) {
            // 修改值
            userData.nikename = this.user.username;
            userData.password = this.user.password;
            userData.name = this.user.name;
            userData.sex = this.user.sex;
            userData.email = this.user.email;
            userData.phone = this.user.phone;
            userData.address = this.user.address;

            // 将修改后的值重新存储到 sessionStorage 中
            sessionStorage.setItem('username', JSON.stringify(userData));
            // 提示保存成功或进行其他操作
            this.$message.success('用户信息保存成功！')
          } else {
            console.error('未找到要更新的值');
          }





            /*axios.put(this.globalstore.apiServer + "/user",
                this.user,
                {
                    headers: {
                        'Content-Type': 'multipart/form-data',
                    }
                })
                .then(() => {
                    this.showTips("保存成功！", "success")
                }).catch(() => {
                    this.showTips("出错了，保存失败。。。", "danger")
                })*/
        }
    },
    beforeCreate(){
        // this.$router.go(0)
    },
    mounted() {
        if (!sessionStorage.getItem('username')){
            // this.$router.push('/login')
        }
        this.getUserInfo()
    }
}
</script>
<style>
h1 {
    margin: 20px 0;
}

.box {
    text-align: center;
}

.flexbox {
    display: flex;
    justify-content: center;
    align-items: center
}

.el-form {
    margin: 0 30px;
}

.el-form-item {
    width: 400px;
    padding: 10px 0;
    margin: auto;
}

.avatar {
    width: 400px;
    margin: auto;
}


.info {
    width: 100%;
}
</style>